<script>
import mixin from "../../common/mixin";
import { mapGetters } from 'vuex'
import getPieChartOption from "./pieChartOption";
export default {
  name: "index",
  mixins: [mixin],
  data() {
    return {
      tips: '',
      seconds: 60,
      menuList: [
        {
          name: '信息管理',
          icon: '/static/company/icon1.png',
          url: '/pages/company/list'
        },
        {
          name: '职位管理',
          icon: '/static/company/icon2.png',
          url: '/pages/post/index'
        },
        {
          name: '企业风采',
          icon: '/static/company/icon3.png',
          url: '/pages/company/image'
        },
        // {
        //   name: '修改密码',
        //   icon: '/static/company/icon4.png',
        //   url: ''
        // }
      ],

      show: false,
      loginForm: {
        phone: '',
        code: '',
        password: ''
      },
      myChart1: null,
      balanceTips: '余额：0元 可查看（0）份简历',
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  onShow() {
    if (!this.userInfo.id) {
      uni.showModal({
        title: '提示',
        content: '请先登录',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/user/login'
            })
          }
        }
      })
      return
    }
    if (this.userInfo.role !== 2) {
      uni.showModal({
        title: '提示',
        content: '请登录',
        // 禁止取消
        showCancel: false,
        success: (res) => {
          if (res.confirm) {
            // 去首页
            uni.navigateTo({
              url: '/pages/user/login'
            })
          }
        }
      })
      return
    }

    this.$api.getPostJoinList({
      company_user_id: this.userInfo.id
    }).then(res => {
      this.dataList = res

      let total = res.length
      let read = res.filter(item => item.is_read === 1).length
      const chartDom = document.getElementById('chartsBox1');
      this.myChart1 = this.$echarts.init(chartDom);
      let option = {
        color: ['#05C8CE','#8ca1a1'],
        title: {
          text: `共收简历(个)`,
          subtext: total + '',
          left: 'center',
          top: '33%', //top待调整
          textStyle: {
            color: '#828B94',
            fontSize: 10,
          },
          subtextStyle: {
            color: '#030000',
            fontSize: 18,
            top: 'center'
          },
        },
        legend: {
          orient: 'horizontal',
          icon: 'circle',
          bottom: 20,
          itemWidth: 10,
          itemHeight: 10,
          x: 'center',
          textStyle: {
            color: '#000000'
          },
          itemGap: 20,
        },
        series: [
          // 主要展示层的
          {
            radius: ['25%', '57%'],
            center: ['50%', '40%'],
            type: 'pie',
            itemStyle: {
              borderWidth: 4,
              borderColor: "#fff",
            },
            hoverAnimation: false, //鼠标移入变大
            animation: false,
            labelLine: {
              show: false,
            },
            label: {
              show: false
            },
            data: [
              {
                value: read,
                name: '已查看',
              },
              {
                value: total - read,
                name: '未查看',
              }
            ]
          },
          // 边框的设置
          {
            radius: ["52%", "49%"],
            center: ['50%', '40%'],
            type: 'pie',
            label:{
              normal: {
                formatter: '{b}\n\n{c}个',
                padding: [0, -30, 25, -30],
                color: '#000',
                fontSize: 12
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 20,
                length2: 60,
                lineStyle: {
                  color: '#D7D7D7'
                },
              },
              color: "#000",
              emphasis: {
                show: true
              }
            },
            hoverAnimation: false, //鼠标移入变大
            animation: false,
            tooltip: {
              show: false
            },
            itemStyle: {
              borderWidth: 3,
              color: '#fff',
              borderColor: "#fff",
            },
            data: [
              {
                value: read,
                name: '已查看',
              },
              {
                value: total - read,
                name: '未查看',
              }
            ]
          },
          {
            zindex: 100,
            radius: "22%",
            center: ['50%', '40%'],
            type: 'pie',
            label:{
              show: false
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              color: '#DFEFFE'
            },
            data: [{
              value: 1,
            }],
          }
        ]
      }

      this.myChart1.setOption(option);
    })

    this.$api.getUserInfo({
      id: this.userInfo.id
    }).then(res => {
      this.userInfo = res
      let balance = parseFloat(res.balance || '0')
      this.$store.commit('setUserInfo', res)
      this.$api.getRechargeConfig().then(res2 => {
        if (res2.length) {
          let rechargeConfig = res2[0]
          let amount = parseFloat(rechargeConfig.amount || '0')
          if (balance && amount) {
            this.balanceTips = `余额：${balance}元 可查看（${Math.floor(balance / amount)}）份简历`
          }
        }
      })
    })


  },
  methods: {
    toBack() {
      uni.removeStorageSync('userInfo')
      // 刷新页面
      uni.reLaunch({
        url: '/pages/user/login'
      })
    },
    toDetail(item) {
      console.log('---', item)
      uni.navigateTo({
        url: `/pages/resume/detail?joinId=${item.id}&resume_id=${item.resume_id}&name=${item.post.name}`
      })
    },
    toUrl(url) {
      if (!url) {
        this.show = true
        this.loginForm.phone = this.userInfo.phone
        return
      }
      console.log(url)
      uni.navigateTo({
        url: url
      })
    },
    codeChange(text) {
      this.tips = text;
    },
    sendCode() {
      if (!this.loginForm.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      if(this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          this.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        this.$u.toast('倒计时结束后再发送');
      }
    },
    end() {
      this.$u.toast('倒计时结束');
    },
    start() {
      this.$u.toast('倒计时开始');
    },
    updatePassword() {
      if (!this.loginForm.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      if (!this.loginForm.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }
      // if (!this.loginForm.code) {
      //   uni.showToast({
      //     title: '请输入验证码',
      //     icon: 'none'
      //   })
      //   return
      // }
      this.$api.updateUser({
        id: this.userInfo.id,
        phone: this.loginForm.phone,
        password: this.loginForm.password
      }).then(res => {
        uni.showToast({
          title: '修改成功',
          icon: 'success'
        })
        this.show = false
      })
    },
  }
}
</script>

<template>
  <div class="home2">
    <div class="custom-nav" v-if="userInfo && userInfo.id && userInfo.role === 2" @click="toBack">
      <u-icon name="arrow-left" color="#fff" size="24"></u-icon>
      <span style="margin-left: 12rpx">退出</span>
    </div>
    <div class="top"></div>
    <div class="content-box">
      <scroll-view scroll-y="true" @scrolltolower="onScroll" style="height: 100%">
        <div class="menu-list">
          <div class="menu-item" v-for="item in menuList" :key="item.url" @click="toUrl(item.url)">
            <image :src="item.icon" style="width: 88rpx;height: 88rpx"></image>
            <div class="menu-name">{{ item.name }}</div>
          </div>
        </div>

        <div class="item-title">
          查阅状态
          <image class="title-icon" src="/static/detail/title@2x.png"></image>
          <span style="font-size: 14px;color: #05C8CE;margin-left: 12rpx">{{ balanceTips }}</span>
        </div>

        <div class="chartsBox1" id="chartsBox1" style="width: 100%;height: 550rpx"></div>

        <div class="item-title">
          最新信息
          <image class="title-icon" src="/static/detail/title@2x.png"></image>
        </div>

        <div class="list-view">
          <u-empty v-if="!dataList.length" text="暂无数据" mode="list"></u-empty>
          <div class="list-item" v-for="(item,index) in dataList" :key="index">
            <div class="f-r j-b">
              <div class="title">{{ item.post && item.post.name }}</div>
            </div>
            <div style="display: flex;align-content: center;margin: 12rpx 0">
              <div class="category">{{ item.post && item.post.category }}</div>
              <div class="post">{{ item.post && item.post.post_category }}</div>
            </div>
            <div class="line"></div>
            <div class="f-r a-c j-b">
              <div class="f-r a-c j-b">
                <image src="/static/company/date.png" style="width: 30rpx;height: 30rpx;margin-right: 12rpx"></image>
                <div class="text">投递时间：{{ item.create_time }}</div>
              </div>
              <div :class="['button primary', item.disabled ? 'info' : '']" @click="toDetail(item)">查看</div>
            </div>
          </div>
          <u-loadmore v-if="dataList.length" :status="loading" />
        </div>
      </scroll-view>
    </div>
    <div class="login-box" v-if="show">
      <image class="close" src="/static/resume/close.png" @click="show = false"/>

      <div class="form-item">
        <input type="tel" v-model="loginForm.phone" placeholder="请输入手机号">
      </div>
      <div class="form-item">
        <input type="password" v-model="loginForm.password" placeholder="请输入新密码">
      </div>
      <div class="form-item">
        <input type="number" placeholder="请输入验证码" />
        <div class="send-btn" @click="sendCode">
          {{ tips }}
        </div>
      </div>
      <div class="button primary" @click="updatePassword">提交</div>

      <u-verification-code
          :seconds="seconds"
          @end="end" @start="start" ref="uCode"
          @change="codeChange">
      </u-verification-code>
    </div>
  </div>
</template>

<style lang="scss">
.home2 {
  height: 100%;
  background-color: #ffffff;
  position: relative;
  .custom-nav {
    position: fixed;
    top: 20rpx;
    left: 30rpx;
    z-index: 9;
    height: 55rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F3F3F3;
  }
  .login-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 660rpx;
    background-color: #f1f1f1;
    z-index: 99;
    .form-item {
      padding: 0 36rpx;
      background-color: #ffffff;
      color: #000000;
      flex-grow: 1;
      margin:60rpx 0;
      text-align: center;
      line-height: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
      display: flex;
      align-items: center;
      padding: 0 60rpx;
      .send-btn  {
        color: #05C8CE;
        font-size: 28rpx;
        flex-shrink: 0;
      }
      input {
        border: none;
        outline: none;
        flex-grow: 1;
        font-size: 28rpx;
        color: #000000;
        text-align: left;
      }
    }
    .button {
      margin: 0;
      height: 100rpx;
      line-height: 100rpx;
      border-radius: 50rpx;
      text-align: center;
      font-size: 36rpx;
    }
    .close {
      position: absolute;
      right: 56rpx;
      top: 56rpx;
      width: 32rpx;
      height: 32rpx;
    }
    padding: 100rpx 56rpx;
  }

  .category {
    height: 44rpx;
    background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    line-height: 44rpx;
    padding: 0 12rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 20rpx;
    color: #FFFFFF;
    text-align: center;
  }
  .post {
    height: 44rpx;
    border: 1px solid #05C8CE;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    line-height: 40rpx;
    padding: 0 12rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 20rpx;
    color: #868686;
    text-align: center;
    margin-left: 20rpx;
  }
  .list-view {
    flex-grow: 1;
    overflow: hidden;
    background: rgba(227, 233, 247, 0.18);
    .list-item {
      background-color: #ffffff;
      padding: 40rpx;
      border-radius: 4rpx;
      margin-bottom: 36rpx;
      .title {
        height: 64rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 40rpx;
        color: #000000;
        line-height: 47rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
      .location {
        font-size: 24rpx;
        color: #666666;
      }
      .line {
        width: 100%;
        border: 1rpx solid #EDEDED;
        margin: 28rpx 0;
      }
      .f-r {
        display: flex;
      }
      .a-c {
        align-items: center;
      }
      .j-b {
        justify-content: space-between;
      }
      .button {
        height: 56rpx;
        padding: 0 36rpx;
        background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
        border-radius: 28rpx 28rpx 28rpx 28rpx;
        line-height: 56rpx;
        color: #ffffff;
      }
      .button.info {
        background: #B6BDBD;
      }
      .text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #7B7B7B;
        line-height: 23rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
      .tag {
        padding: 0 24rpx;
        height: 34rpx;
        background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
        border-radius: 6rpx 6rpx 6rpx 6rpx;
        border: 1px solid #05C8CE;
        line-height: 30rpx;
        color: #ffffff;
        margin-right: 12rpx;
      }
      .tag2 {
        background-color: transparent !important;
        border: 1px solid #868686;
        color: #868686;
        font-size: 16rpx;
      }
    }
  }
  .top {
    width: 100%;
    height: 522rpx;
    background-image: url("/static/company/bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 -60rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .content-box {
    background-color: #ffffff;
    border-radius: 50rpx 50rpx 0 0;
    width: 100%;
    margin-top: -80rpx;
    padding: 20rpx 24rpx 24rpx 24rpx;
    flex-grow: 1;
    overflow: hidden;
    .menu-list {
      width: 100%;
      display: flex;
      align-items: center;
      background-color: #ffffff;
      border-radius: 32rpx;
      padding: 32rpx 0;
      margin-bottom: 50rpx;
      .menu-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .menu-name {
          height: 30rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #303030;
          line-height: 26rpx;
          text-align: center;
          font-style: normal;
          text-transform: none;
          text-align: center;
          margin-top: 12rpx;
        }
      }
    }
  }
}
</style>
